
import React, { memo, useEffect, useState } from "react";
import { reqHotSingers } from "../../../../api/find";

import style from './sty.module.css'
import { Link } from 'react-router-dom'
const HotSingers = () => {



  const [singers, setSingers] = useState([]);
  useEffect(() => {
    reqHotSingers().then(res => {
      setSingers(res.artists)
    })
  }, [])

  return <div className={style.root}>
    <div className={'flex4'}>
      <div>热门歌手</div>
      <Link className={style.more} to={'/artists'}>查看全部</Link>
    </div>
    <ul className={style.list}>
      {singers && singers.map(singer => <li key={singer.id}>
        <Link to={`/singer/${singer.id}`}     >
          <img src={singer.img1v1Url} alt="" />
          <div className='txt1'>{singer.name}</div>
        </Link>
      </li>)}
    </ul>
  </div>
}
export default memo(HotSingers)